<template>
  <div>
    <p>vue 高级特性</p>
    <hr />

    <!-- 自定义 v-model -->
    <p>1. 自定义 v-model</p>
    <p>{{name}}</p>
    <CustomVModel v-model="name" />
    <hr />
    <!-- nextTick -->
    <p>2. nextTick</p>
    <NextTick />

    <hr />

    <!-- slot -->
    <p>3. slot</p>
    <!-- <SlotDemo :url="website.url">{{website.title}}</SlotDemo> -->
    <ScopedSlotDemo :url="website.url">
      <template v-slot="slotProps">{{slotProps.slotData.title}}</template>
    </ScopedSlotDemo> 
    <hr />

    <!-- 动态组件 -->
    <p>4. 动态组件</p>
    <component :is="NextTickName" />
    <hr />

    <!-- 异步组件 -->
    <p>5. 异步组件</p>
    <FormDemo v-if="showFormDemo" />
    <button @click="showFormDemo = true">show form demo</button>
    <hr />

    <!-- keep-alive -->
    <p>6. keep-alive</p>
    <KeepAlive />
    <hr />

    <!-- mixin -->
    <p>7. mixin</p>
    <!-- <MixinDemo /> -->
  </div>
</template>

<script>
import CustomVModel from "./CustomVModel";
import NextTick from "./NextTick";
import SlotDemo from "./SlotDemo";
import ScopedSlotDemo from "./ScopedSlotDemo";
import KeepAlive from "./KeepAlive";
import MixinDemo from "./MixinDemo";

// const FormDemo = () => import("../BaseUse/FormDemo");

export default {
  components: {
    CustomVModel,
    NextTick,
    SlotDemo,
    ScopedSlotDemo,
    FormDemo: () => import("../BaseUse/FormDemo"),
    KeepAlive,
    MixinDemo
  },
  data() {
    return {
      name: "双越",
      website: {
        url: "http://imooc.com/",
        title: "imooc",
        subTitle: "程序员的梦工厂"
      },
      NextTickName: "NextTick",
      showFormDemo: false
    };
  }
};
</script>